document.addEventListener("DOMContentLoaded" , function () {
    var wrap = document.querySelector(".wrap");
    var widthMax = window.innerWidth
    console.log(widthMax)
    var heightMax = window.innerHeight
    wrap.style.height = heightMax + "px";
    wrap.style.width = widthMax + "px";

    /* 滑屏js */
    var startY = 0;   // 手指第一次触摸屏幕时的Y坐标
    var touchFlag = false;   // 是否可滑动的标志
    var newY = 0;    // 滑动的距离
    var marginTop = 0;    // 控制第一个页面与顶部的距离 , 上滑减一 , 下滑加一
    var all_pages = 3;   // 页面总数
    var height = wrap.offsetHeight;
    var page2 = document.querySelector(".page2");
    var newPage = 0;

    wrap.addEventListener("touchstart" , function (e) {
        startY = e.targetTouches[0].clientY;
    });
    wrap.addEventListener("touchend" , function () {
        startY = 0;
        if(num1 == 100){
            touchFlag = true;
        }
        // touchFlag = true;
    });
    wrap.addEventListener("touchmove" , function (e) {
        e.preventDefault();
        newY = e.targetTouches[0].pageY;
        if(newY - startY < -50 ){
            if(touchFlag == true && marginTop > -all_pages + 1){
                touchFlag = false;
                marginTop -= 1;
                newPage += 1;
                page2.style.marginTop = marginTop * height + 'px';
            }
        }
        else if(newY - startY > 50){
            if(touchFlag === true && newPage > 0){
                touchFlag = false;
                marginTop += 1;
                newPage -= 1;
                page2.style.marginTop = marginTop * height + 'px';
            }
        }
    })

    /* 首页js */
    var index = document.querySelector(".index");
    var dots = document.querySelector(".dots");
    var dot = "";
    var pencentage = document.querySelector(".percentage");
    var bgm = document.querySelector(".bgm")
    window.setInterval(function () {
        dot = (dot == '...') ? "." : (dot + ".");
        dots.innerText = dot;
    } , 300);
    var num1 = 0;
    var timer1 = window.setInterval(function () {
        num1 = num1 + 2;
        if(num1 == 100){
            index.style.display = "none";
            clearInterval(timer1);
            for(var i = 1 ; i < wrap.children.length ; i++){
                wrap.children[i].style.display = "flex";
                touchFlag = true;
            }
            bgm.style.display = "block";
        }
        else{
            pencentage.innerText = num1;
        }
    } , 100);
    var bgmPlay = false;
    bgm.addEventListener("click" , function () {
        if(bgmPlay == false){
            bgm.style.animationPlayState = "running";
            bgm.children[0].play();
            bgmPlay = true;
        }
        else {
            bgm.style.animationPlayState = "paused";
            bgm.children[0].pause();
            bgmPlay = false;
        }
    })


    /* 第三页js */
    var page3 = document.querySelector(".page3");
    var choice = document.querySelector(".choice");
    var words = document.querySelector(".words");
    for(var i = 0 ; i < choice.children.length ; i++){
        choice.children[i].setAttribute("index" , i);
        choice.children[i].addEventListener("click" , function () {
            var index = this.getAttribute("index")
            console.log(index)
            for(var j = 0 ; j < choice.children.length ; j++){
                choice.children[j].children[0].style.boxShadow = "none";
                words.children[j].style.display = "none";
                words.children[index].style.display = "block";
            }
            this.children[0].style.boxShadow = "1px 1px 10px 1px goldenrod";
            if(index == 0){
                page3.children[0].style.backgroundImage = "url('images/组 6.png')";
            }
            else if(index == 1){
                page3.children[0].style.backgroundImage = "url('images/组 3.png')";
            }
            else{
                page3.children[0].style.backgroundImage = "url('images/组 4.png')";
            }
        })
    }
})